{% extends 'weatherweb/layout/base_layui.html' %}

<!-- 添加当前页面的标题 -->
{% block title %}
    城市具体天气
{% endblock %}

<!-- 添加当前页面的CSS-->
{% block css %}
{% endblock %}

<!-- 添加当前页面面包屑导航的名称 -->
{% block breadcrumb %}
    城市具体天气
{% endblock %}

<!-- 添加当前页面的内容 -->
{% block content %}
    <!-- 内容02：查询表单部分 -->
    <div class="queryArea" style="margin-top: 20px;">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_province"><b>省/直辖市：</b></label>
                    <div class="layui-input-inline">
                        <select name="q_province" id="q_province" lay-search="" lay-filter="q_province">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_city"><b>地级市：</b></label>
                    <div class="layui-input-inline">
                        <select name="q_city" id="q_city" lay-search="">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="q_date"><b>日期：</b></label>
                    <div class="layui-input-inline">
                        <input name="q_date" id="q_date" class="layui-input" value="{{ date }}">

                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" id="btnQuery" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>
                    <button type="button" id="btnAll" class="layui-btn">
                        <i class="layui-icon layui-icon-list"></i> 全部
                    </button>
                </div>

            </div>

        </form>
    </div>

    <!-- 内容3：表格部分 -->
    <table class="layui-hide" id="tableWeather"></table>

    <!-- 内容04：表格中的编辑和删除的按钮 -->
    <script type="text/html" id="tableBtn">
        <a class="layui-btn layui-btn-xs" lay-event="view"><i class="layui-icon layui-icon-edit"></i> 查看</a>

    </script>
{% endblock %}

<!-- 添加当前页面的JS -->
{% block js %}
    <script>
        // 入口函数
        $(function () {
            // 加载表单
            loadForm();
            // 初始化表格
            initTable();
            // 加载省信息
            loadProvince();
            // 加载相应省下的地级市
            loadCitysByProvince();
            // 相应按钮点击
            buttonClick();
        });

        // ===========初始化表单 =========
        function loadForm() {
            layui.use(['form', 'laydate'], function () {
                let form = layui.form;
                var laydate = layui.laydate;

                //常规用法
                laydate.render({
                    elem: '#q_date',
                });
            })
        }

        // ============== 初始化表格 =========
        function initTable() {
            // 使用table插件
            layui.use('table', function () {
                // 实例化一个table对象
                let table = layui.table;
                // 渲染table
                table.render({
                    elem: "#tableWeather",
                    url: "{% url 'list_weather' %}",
                    method: 'post',
                    where: {
                        q_province:$('#q_province').val(),
                        q_city:$('#q_city').val(),
                        q_date: $('#q_date').val(),
                        csrfmiddlewaretoken: "{{ csrf_token }}"
                    },
                    cols: [[
                        {type: 'numbers', width: 80, title: '序号', align: 'center'}
                        , {field: 'province', width: 180, title: '省份', align: 'center'}
                        , {field: 'area', width: 180, title: '城市', align: 'center'}
                        , {field: 'weather', width: 100, title: '天气', align: 'center'}
                        , {field: 'windd', width: 100, title: '风向', align: 'center'}
                        , {field: 'windd', width: 100, title: '风力', align: 'center'}
                        , {field: 'hight', width: 100, title: '最高温', align: 'center'}
                        , {field: 'low', width: 100, title: '最低温', align: 'center'}
                        , {field: 'date', title: '日期', align: 'center'}

                        , {'title': '操作', fixed: 'right', width: '15%', align: 'center', toolbar: '#tableBtn'}
                    ]]
                    , page: true
                    , limit: 12
                    , limits: [12, 15, 20, 30, 50, 100]
                    , done: function (res, curr, count) {
                        // 表格加载完成后自动执行的函数
                        $('thead tr').css({'background-color': '#009688', 'color': 'white'})

                    }
                })
            })
        }

        // ============= 加载省 ============
        function loadProvince() {
            // 使用layui.form
            layui.use('form', function () {
                let form = layui.form;
                // Ajax

                $.ajax({
                    url: "{% url 'list_province' %}",
                    method: 'get',
                    dataType: 'json',
                    success: function (res) {

                        // 获取父容器
                        let parentContainer = $('#q_province');
                        // 遍历
                        $.each(res.data, (index, value) => {
                            // 新建一个option
                            $('<option>').attr('value', value.province).text(value.province).appendTo(parentContainer);
                        });
                        // 重新渲染
                        form.render();

                    }
                })
            });


        }

        // =============加载相应省下的地级市=============
        function loadCitysByProvince() {
            layui.use('form', function () {
                let form= layui.form;

                // 侦听下拉框的变化
                form.on("select(q_province)", function (obj) {
                    let province = obj.value;

                    // ajax
                    $.ajax({
                        url:"{% url 'list_city' %}",
                        method: 'post',
                        data: {
                            province: province,
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        },
                        dataType: 'json',
                        success: function (res) {

                            // 获取要加载的父容器
                            let parentContainers = $('#q_city');
                            // 渲染前把值清空
                            parentContainers.html("");
                             $('<option>').attr('value', '').text('请选择地级市').appendTo(parentContainers);
                            // 循环遍历
                            $.each(res.data, (index,value)=>{
                                // 新建option
                                $('<option>').attr('value', value.city).text(value.city).appendTo(parentContainers);
                            });
                            // 重新渲染
                            form.render();
                        }
                    })
                })
            })
        }

        // ============= 按钮的点击事件 ===============
        function buttonClick() {
            // === 查询===
            $('#btnQuery').on('click', function () {
                initTable();
            });
            // === 显示全部 ==
            $('#btnAll').on('click',function () {
                location.reload();
            })
        }
    </script>
{% endblock %}